/*
 * @Author: xiaoyan
 * @Date: 2021-11-23 09:31:13
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-09 10:24:11
 * @Description: 用户管理
 * @FilePath: \user_auth_front\src\pages\user\index.tsx
 */
import { message, Table } from "antd";
import ListHeader from "@/pages/components/listHeader"
import add from "./components/add"
import "./index.scss"
//import {organizationList} from "@/mocks/user"
import expandedRowRender from "./components/expandedRow";
import {useState,useEffect} from "react"
import { userList,userDel,organizationListAll } from "@/api";
import { useDispatch, useMappedState } from "redux-react-hook";
import { unique } from "@/utils";
import { setOrganizationLists } from "@/store/modules/dictionary";
import { IOrganization } from "@/interface";
export default ()=>{
    const columns = [
        {
            title:"所属机构ID",
            dataIndex:"id",
            key:"id",
        },
        {
            title:"所属机构",
            dataIndex:"name",
            key:"name",
        },
        {
            title:"用户总数",
            dataIndex:"count",
            key:"count",
        },
        {
            title:"可用用户数",
            dataIndex:"userCount",
            key:"userCount",
        },
        {
            title:"禁用用户数",
            dataIndex:"disabledUserCount",
            key:"disabledUserCount",
        },
    ];
    const [organizationList,setOrganizationList] = useState<Array<any>>([]);
    const [dataList,setDataList] = useState<Array<any>>([]);
    let organizationLists:Array<IOrganization> = [];
    const dispatch = useDispatch();
    interface Tparmas {
        page?:number,
        limit?:number,
        keyWord?:string,
    }
    //分页
    const changeCurrent = (page:number, pageSize?:number):void=>{
        setPagination(Object.assign(pagination,{current:page,pagesize:pageSize}));
        ajaxList({page:page,limit:pageSize});
    }
    const [pagination,setPagination] = useState({
        current:1,
        pagesize:10,
        total:0,
        onChange:changeCurrent,
    });
    //查询机构列表
    const ajaxOrganizationList = ()=>{
        if(organizationLists.length) return Promise.resolve({code:1});
        return organizationListAll();
    };
    //更加机构id查询查询机构名称
    const getOrganizationNameById = (id:Number)=>{
        const obj = organizationLists.find((item:any)=>item.organizationId === id);
        return obj?.name || "未知";
    };
    //分离出机构列表
    const separateOrganizationList = (list:Array<any>)=>{
        let ids = list.map(item=>item.organizationId);
        ids = unique(ids);
        ids = ids.map(item=>({
            id:item,
            name:getOrganizationNameById(item),
            count:list.filter(it=>it.organizationId === item).length,
            userCount:0,
            disabledUserCount:0,
        }));
        setOrganizationList(ids);
        list.forEach(item=>item.organizationName = getOrganizationNameById(item.organizationId));
        setDataList(list);
    };
    const ajaxList = (params:Tparmas = {})=>{
        const {page,limit,keyWord} = params;
        const data = {
            page:page || pagination.current,
            limit:limit||pagination.pagesize,
            keyWord,
        };
        const ajax1 = ajaxOrganizationList();
        const ajax2 = userList(data);
        Promise.all([ajax1,ajax2]).then((res:Array<any>)=>{
            const [res1,res2] = res;
            if(res1.code === 0){
                dispatch(setOrganizationLists(res1.data));
            }else if(res1.code != 1){
                message.error(res1.msg);
            }
            if(res2.code === 0){
                separateOrganizationList(res2.data.list);
                setPagination(Object.assign({},pagination,{current:page,total:res2.data.totalCount}));
            }else{
                message.error(res2.msg);
            }
        });
    };
    useEffect(()=>{
        ajaxList({page:1});
    },[]);
    const modalConf = {
        views:add,//视图
        handleBack:ajaxList,
        title:"新增用户",
    };
    return(
        <div className="list-container">
            <ListHeader modalConf={modalConf} />
            <Table rowKey="id" columns={columns}  dataSource={organizationList} expandable={{ 
                expandedRowRender:record=><div style={{margin:0}}>{expandedRowRender(dataList.filter(item=>item.organizationId === record.id))}</div>
              }} />
        </div>
    );
}